<template>
    <mu-container class="button-wrapper">
        <div id="mySound"></div>
        <template>
            <mu-row gutter style="margin-bottom: 40px">
                <mu-col span="3">
                    <mu-button icon slot="left">
                        <mu-icon value="home"></mu-icon>
                    </mu-button>
                    <span class="nav-logo">Echo-Reader</span>
                </mu-col>
                <mu-col span="7">
                    <div class="grid-cell">
                        <mu-auto-complete help-text="想到就要搜到" :data="fruits" v-model="searchValue" avatar>
                            <template slot-scope="scope">
                                <mu-list-item-action>
                                    <mu-avatar color="primary">
                                        {{scope.item.substring(0, 1)}}
                                    </mu-avatar>
                                </mu-list-item-action>
                                <mu-list-item-content v-html="scope.highlight"></mu-list-item-content>
                            </template>
                        </mu-auto-complete>
                        <el-button circle slot="append" icon="el-icon-search"></el-button>
                    </div>
                </mu-col>
                <mu-col span="2">
                    <el-color-picker v-model="themeColor"></el-color-picker>
                </mu-col>
            </mu-row>
            <!--导航栏-->
            <mu-row gutter style="margin-bottom: 40px">
                <mu-col span="12">
                    <!--rgb(61, 177, 255)-->
                    <mu-bottom-nav color="#3BA2F4" :value.sync="shift" shift>
                        <mu-bottom-nav-item value="所有排行" title="所有排行"
                                            icon="list"></mu-bottom-nav-item>
                        <mu-bottom-nav-item value="古" title="古" icon="chrome_reader_mode"></mu-bottom-nav-item>
                        <mu-bottom-nav-item value="今" title="今" icon="laptop_chromebook"></mu-bottom-nav-item>
                        <mu-bottom-nav-item value="荐" title="荐" icon="thumb_up_alt"></mu-bottom-nav-item>
                        <mu-bottom-nav-item value="更多" title="更多" icon="more"></mu-bottom-nav-item>
                    </mu-bottom-nav>
                </mu-col>
            </mu-row>
            <mu-row gutter style="margin-bottom: 40px">
                <mu-col span="8">
                    <el-carousel :interval="2000" style="text-align: center"
                                 type="card" height="265px">
                        <el-carousel-item v-for="(board,index) in broadImage">
                            <el-image class="bookImageBroad" fit="cover" :src="board.coverUrl"
                                      :alt="board.bookName"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </mu-col>
                <mu-col span="4">
                    <el-card style="width: 100%;height: 100%; margin: 0 auto;">
                        <mu-flex justify-content="center">
                            <span class="annonce">
                                公告
                            </span>
                        </mu-flex>
                        <ul class="annoce-content">
                            <li v-for="(ann, i) in announcement">
                                <el-link :type="i===0?'danger':'primary'">【{{ann.type}}】{{ann.content}}</el-link>
                            </li>
                        </ul>
                        <mu-flex justify-content="start">
                            <mu-flex style="overflow: hidden" justify-content="center">
                                <el-button size="mini" circle type="warning" icon="el-icon-bell"></el-button>
                                <ul class="marquee_list" :class="{marquee_top:animate}">
                                    <li v-for="(item,index) in globalNotice">{{item.content}}</li>
                                </ul>
                            </mu-flex>
                        </mu-flex>
                    </el-card>
                </mu-col>
            </mu-row>

            <!--最新上架-->
            <mu-row gutter style="margin-bottom: 40px">
                <mu-col span="12">
                    <mu-ripple class="mu-ripple-title titleIcon" :opacity="0.7">
                        <i class="el-icon-news" style="margin-right: 5px"></i>
                        最新上架
                    </mu-ripple>
                    <mu-divider></mu-divider>
                </mu-col>
            </mu-row>
            <mu-row gutter style="margin-bottom: 40px">
                <mu-col span="3" v-for="(book,key) in newBooks" :key="book.id">
                    <ul class="bookBox">
                        <li>
                            <el-image class="bookImage"
                                      :src="book.coverUrl"
                                      @click="gotoReadPage(book.id)">
                            </el-image>
                        </li>
                        <li class="bookTitle"> {{book.bookName}}</li>
                        <li class="author"> {{book.author}}</li>
                        <li class="intro"> {{book.intruduction}}</li>
                        <li class="intro">出版时间: {{book.issueDate | dateformat("YYYY-MM-DD")}}</li>
                    </ul>
                </mu-col>
            </mu-row>
            <!-- 人气完本 -->
            <mu-row gutter style="margin-bottom: 40px">
                <mu-col span="9">
                    <mu-ripple class="mu-ripple-title titleIcon" :opacity="0.7">
                        <mu-icon size="36" color="red" value="whatshot"></mu-icon>
                        人气完本
                    </mu-ripple>
                    <mu-divider></mu-divider>
                </mu-col>
                <mu-col span="3">
                    <mu-ripple class="mu-ripple-title titleIcon" :opacity="0.7">
                        <mu-icon size="36" color="blue" value="reorder"></mu-icon>
                        完本榜
                    </mu-ripple>
                    <mu-divider></mu-divider>
                </mu-col>
            </mu-row>
            <mu-row gutter style="margin-bottom: 40px">
                <mu-col span="3.3">
                    <ul class="bookBox">
                        <li>
                            <el-carousel :interval="1500"
                                         style="text-align: center"
                                         type="card"
                                         height="150px"
                                         @change="changeBook">
                                <el-carousel-item v-for="(board,index) in hotCommentBooks">
                                    <el-image class="bookImageBroad cute" fit="cover" :src="board.coverUrl"></el-image>
                                </el-carousel-item>
                            </el-carousel>
                        </li>
                        <li class="bookTitle">
                            {{this.carouselBook?hotCommentBooks[this.carouselBook].bookName:''}}
                        </li>
                        <li class="author">
                            {{this.carouselBook?hotCommentBooks[this.carouselBook].author:''}}
                        </li>
                        <li>
                            <el-tag style="margin-right: 5px">武侠</el-tag>
                            <el-tag style="margin-right: 5px" type="success">成人</el-tag>
                            <el-tag style="margin-right: 5px" type="info">玄幻</el-tag>
                            <el-tag style="margin-right: 5px" type="warning">历史</el-tag>
                            <el-tag style="margin-right: 5px" type="danger">文学</el-tag>
                        </li>
                        <li class="intro">
                            {{this.carouselBook?hotCommentBooks[this.carouselBook].intruduction:''}}
                        </li>
                    </ul>
                </mu-col>
                <mu-col span="6">
                    <mu-row gutter style="margin-bottom: 40px">
                        <mu-col span="4" v-for="(book,key) in hotBooks" :key="book.id">
                            <mu-row gutter style="margin-bottom: 10px">
                                <mu-col style="float: right" span="3.2">
                                    <el-image class="bookImage mini"
                                              :src="book.coverUrl"
                                              @click="gotoReadPage(book.bookId)">
                                    </el-image>
                                </mu-col>
                                <mu-col span="8.8">
                                    <p class="bookTitle">{{book.bookName}}</p>
                                    <p class="intro">{{book.intruduction}}</p>
                                </mu-col>
                            </mu-row>
                        </mu-col>
                    </mu-row>
                </mu-col>
                <mu-col span="2.7">
                    <mu-row gutter style="margin-bottom: 10px" v-for="(book,key) in rankingBookList" :key="book.id">
                        <!--排名第1-->
                        <mu-col v-if="key===0" span="8.8">
                            <p class="No1">No.{{key+1}}</p>
                            <p @click="gotoReadPage(book.bookId)" class="bookTitle rank-title">{{book.bookName}}</p>
                            <p class="intro">{{book.intruduction}}</p>
                        </mu-col>
                        <mu-col v-else="key===0" span="8.8">
                            <span :class="[key===1?'num2':key===2?'num3':'rank-num-span']">{{key+1}}</span>
                            <span @click="gotoReadPage(book.bookId)" class="bookTitle">{{book.bookName}}</span>
                            <span class="rank-author">{{book.author}}</span>
                        </mu-col>
                        <mu-col v-if="key===0" class="float-right" span="3.2">
                            <el-image class="bookImage mini"
                                      :src="book.coverUrl"
                                      @click="gotoReadPage(book.bookId)">
                            </el-image>
                        </mu-col>
                    </mu-row>
                </mu-col>
            </mu-row>
            <!--页尾-->
            <el-container>
                <el-header>
                    <el-divider content-position="center"><span class="bookTitle">友情链接</span></el-divider>
                </el-header>
                <el-main :height="200">
                    <el-row :gutter="20">
                        <el-col :span="24" class="business-icon">
                            <a :href="item.link" target="_blank" v-for="(item,i) in businessInfo" :title="item.title">
                                <el-image class="link-a" :src="item.img"></el-image>
                            </a>
                        </el-col>
                    </el-row>
                </el-main>
                <el-footer>
                    <el-row :gutter="20">
                        <p class="contact" style="font-size:14px;text-align: center">
                            如有问题欢迎联系<a class="footer-contact-feedback" href="https://yuedu.baidu.com/feedback"
                                       target="_blank">投诉反馈</a>
                        </p>
                    </el-row>
                    <el-row :gutter="20">
                        <p style="text-align: center">
                            <span class="cr">京ICP证082931号</span><span class="cr"> 京网文[2019]2353-178号</span>
                            <span class="cr"> © 2019EchoMedia</span>
                            <a href="https://element.eleme.cn/" class="Bidu" target="_blank"> 使用EchoRead前必读</a>
                            <el-divider direction="vertical"></el-divider>
                            <a class="xieyi" target="_blank" href="https://muse-ui.org/">平台协议</a>
                            <el-divider direction="vertical"></el-divider>
                            <a class="qiye" target="_blank"
                               href="https://github.com/nutschan/leisurely">企业文库</a>
                            <el-divider direction="vertical"></el-divider>
                            <a class="guanggao" target="_blank"
                               href="https://jiaoyu.baidu.com/topic/bsplatform/brand_promotion">广告服务</a>
                            <el-divider direction="vertical"></el-divider>
                            <a class="shangye" target="_blank"
                               href="https://jiaoyu.baidu.com/topic/bsplatform/overview">Echo教育商业服务平台</a>
                        </p>
                    </el-row>
                </el-footer>
            </el-container>
        </template>
    </mu-container>
</template>
<script>
    import MuDivider from "muse-ui/es5/Divider/Divider";

    export default {
        components: {MuDivider},
        name: "echoview",
        data() {
            return {
                // 大屏广告牌
                broadImage: [],
                rateValue: null,
                bookProps: null,
                carouselBook: 0,
                carouselBoard: 0,
                searchValue: "",
                themeColor: "#409EFF",
                //输入提醒
                fruits:
                    [
                        'Apple', 'Apricot', 'Avocado',
                        'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry',
                        'Boysenberry', 'Blood Orange',
                        'Cantaloupe', 'Currant', 'Cherry', 'Cherimoya', 'Cloudberry',
                        'Coconut', 'Cranberry', 'Clementine',
                        'Damson', 'Date', 'Dragonfruit', 'Durian',
                        'Elderberry',
                        'Feijoa', 'Fig',
                        'Goji berry', 'Gooseberry', 'Grape', 'Grapefruit', 'Guava',
                        'Honeydew', 'Huckleberry',
                        'Jabouticaba', 'Jackfruit', 'Jambul', 'Jujube', 'Juniper berry',
                        'Kiwi fruit', 'Kumquat',
                        'Lemon', 'Lime', 'Loquat', 'Lychee',
                        'Nectarine',
                        'Mango', 'Marion berry', 'Melon', 'Miracle fruit', 'Mulberry', 'Mandarine',
                        'Olive', 'Orange',
                        'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Persimmon', 'Physalis', 'Plum', 'Pineapple',
                        'Pumpkin', 'Pomegranate', 'Pomelo', 'Purple Mangosteen',
                        'Quince',
                        'Raspberry', 'Raisin', 'Rambutan', 'Redcurrant',
                        'Salal berry', 'Satsuma', 'Star fruit', 'Strawberry', 'Squash', 'Salmonberry',
                        'Tamarillo', 'Tamarind', 'Tomato', 'Tangerine',
                        'Ugli fruit',
                        'Watermelon'
                    ],
                shift: "",
                //公告栏信息
                announcement: [],
                //全局通知列表
                globalNotice: [],
                //最新上架图书
                newBooks: [],
                //评论数量前三位的书籍
                hotCommentBooks: [],
                //人气完本--阅读量排行
                hotBooks: [],
                //人气完本--关注量排行
                rankingBookList: [],
                //友商链接
                businessInfo: [],
                animate: false
            }
        },
        methods: {
            //初始化数据
            initData() {
                this.getFriendLinkList();
                this.getAnnouncementList();
                this.getGlobalNotice();
                this.getNewBookList();
                this.getFollowList();
                this.getReadNumBookList();
                this.getBillBoardBookList();
                this.getHotCommentsList();
            },
            //获取友商链接
            getFriendLinkList() {
                this.$axios.post("/api/friend/linkList").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.businessInfo.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //获取公告列表
            getAnnouncementList() {
                this.$axios.post("/api/announcement/list").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.announcement.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //获取滚动通知
            getGlobalNotice() {
                this.$axios.post("/api/notice/list").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.globalNotice.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //获取最新上架 书籍列表
            getNewBookList() {
                this.$axios.post("/api/book/getNewBookList").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.newBooks.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //获取关注列表
            getFollowList() {
                this.$axios.post("/api/rank/followList").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.rankingBookList.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            getHotCommentsList() {
                let that = this;
                this.$axios.post("/api/book/hotCommentsList").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        that.hotCommentBooks.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //获取阅读量排行列表
            getReadNumBookList() {
                this.$axios.post("/api/rank/readList").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.hotBooks.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //获取大屏广告列表
            getBillBoardBookList() {
                this.$axios.post("/api/rank/billBoardList").then(res => {
                    console.log(res);
                    let result = res.data;
                    let resultData = result.data;
                    let resultCode = result.code;
                    if (result && resultCode === 200) {
                        this.broadImage.push(...resultData);
                        console.log(resultData);
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //幻灯片滚动
            changeBook(val, oldVal) {
                this.carouselBook = val;
            },
            //滚动通知
            scroll() {
                let that = this;
                this.animate = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
                setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
                    that.globalNotice.push(that.globalNotice[0]);  // 将数组的第一个元素添加到数组的末尾
                    that.globalNotice.shift();               //删除数组的第一个元素
                    that.animate = false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
                }, 1000)
            },
            //前往阅读界面
            gotoReadPage(bookId) {
                this.getBookProps(bookId);
            },
            //查询书籍对象
            getBookProps(bookId) {
                this.$axios.post("/api/book/getBookProps", this.$qs.stringify({
                    bookId: bookId,
                })).then(res => {
                    console.log(res);
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        console.log("data get it！");
                        this.$router.push({
                            path: "/readpage",
                            name: "readpage",
                            params: {
                                bookProps: resultData.data
                            }
                        })
                    } else {
                        console.log("data get failed.");
                    }
                })
            }

        },
        created() {
            //初始化数据
            this.initData();
        },
        mounted() {
            //两秒钟后开始滚动，频率: 每一秒钟滚动一次
            setInterval(this.scroll, 2000);
        }

    }
</script>

<style scoped>
    .business-icon {
        margin-left: 10px;
    }

    .business-icon a {
        margin-left: 10px;
    }

    .link-a {
        border-radius: 10px;
        width: 110px;
        height: 40px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    .No1 {
        font: 700 14px/18px Arial;
        width: 36px;
        height: 18px;
        margin: 0 0 6px;
        text-align: center;
        color: #fff;
        background: #ff589d;
    }

    .num2 {
        color: #fff;
        background: #84e7d6;
        font: 700 14px/16px Arial;
        display: inline-block;
        overflow: hidden;
        width: 16px;
        height: 16px;
        text-align: center;
        letter-spacing: -1px;
        margin-right: 10px;
    }

    .num3 {
        color: #fff;
        background: #81de87;
        font: 700 14px/16px Arial;
        display: inline-block;
        overflow: hidden;
        width: 16px;
        height: 16px;
        text-align: center;
        letter-spacing: -1px;
        margin-right: 10px;
    }

    .rank-title {
        cursor: pointer;
        margin-right: 5px;
    }

    .rank-author {
        margin-left: 5px;
        color: darkgray;
        float: right;
    }

    .rank-num-span {
        font: 700 14px/16px Arial;
        display: inline-block;
        overflow: hidden;
        width: 16px;
        height: 16px;
        text-align: center;
        letter-spacing: -1px;
        color: #666;
        margin-right: 10px;
        background: #ededed;
    }

    .bookImageBroad {
        border-radius: 10px;
        width: 200px;
        height: 260px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    .cute {
        width: 100px;
        height: 140px;
    }

    .bookImage {
        border-radius: 10px;
        width: 120px;
        height: 140px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    .mini {
        border-radius: 5px;
        width: 70px;
        height: 100px;
    }

    .bookBox {
        align-items: center;
        align-content: center;
        list-style-type: none;
        text-align: center;

    }

    .bookBox li {
        margin-top: 5px;

    }

    .author {
        display: block;
        font-size: 12px;
        font-family: Helvetica, Arial, sans-serif;
        overflow: hidden;
        height: 16px;
        margin-top: 1px;
        padding-right: 10px;
        white-space: nowrap;
        color: #a6a6a6;
    }

    .bookTitle {
        font-size: 15px;
        font-weight: bolder;
        cursor: pointer;
    }

    .intro {
        font: 12px/20px PingFangSC-Regular, '-apple-system', Simsun;
        overflow: hidden;
        color: #666;
    }

    .mu-ripple-title {
        position: relative;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-right: 16px;
        background-color: #fff;
        border-radius: 4px;
        font-size: 20px;
    }

    .titleIcon {
        color: #2196f3;
        border: 1px snow;
        cursor: pointer;
    }

    .marquee_list {
        list-style-type: none;
        width: 100%;
        height: 24px;
        margin-left: 5px;
        /*overflow: hidden;*/
    }

    .marquee_top {
        display: list-item;
        transition: transform 500ms linear 0s;
        transform: translateY(-100%);
        backface-visibility: hidden;

        /*transition: all 2s;*/
        /*margin-top: -40px;*/
    }

    .marquee_list li {
        height: 24px;
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
    }

    .marquee_list li span {
        padding: 0 2px;
    }

    .annonce {
        font-size: 14px;
        font-weight: bold;
    }

    .annoce-content {
        list-style-type: none;
        margin-top: 5px;
        font-size: 20px;
        box-sizing: border-box;
    }

    .grid-cell {
        border-radius: 4px;
        height: 36px;
        float: right;
        background: rgba(255, 255, 255, 0.8);
    }

    .nav-logo {
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bolder;
        cursor: pointer;
        color: #4A9FF9;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .float-right {
        text-align: right;
    }
</style>